<template>
  <div class="exhibition-scope">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="container">
        <h1 class="page-title">展品范围</h1>
        <p class="page-subtitle">涵盖机器人全产业链的产品和技术展示</p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a @click="setActiveTab('exhibition-intro')" 
             :class="['nav-item', { active: activeTab === 'exhibition-intro' }]">
            展会介绍
          </a>
          <a @click="setActiveTab('product-scope')" 
             :class="['nav-item', { active: activeTab === 'product-scope' }]">
            展品范围
          </a>
          <a @click="setActiveTab('exhibition-highlights')" 
             :class="['nav-item', { active: activeTab === 'exhibition-highlights' }]">
            展会集锦
          </a>
          <a @click="setActiveTab('venue-intro')" 
             :class="['nav-item', { active: activeTab === 'venue-intro' }]">
            展馆介绍
          </a>
          <a @click="setActiveTab('organizer-intro')" 
             :class="['nav-item', { active: activeTab === 'organizer-intro' }]">
            主办方介绍
          </a>
          <a @click="setActiveTab('organization-structure')" 
             :class="['nav-item', { active: activeTab === 'organization-structure' }]">
            组织架构
          </a>
          <a @click="setActiveTab('past-exhibitions')" 
             :class="['nav-item', { active: activeTab === 'past-exhibitions' }]">
            往届展会
          </a>
          <a @click="setActiveTab('downloads')" 
             :class="['nav-item', { active: activeTab === 'downloads' }]">
            下载中心
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <!-- 展品分类 -->
      <section class="scope-section">
        <h2 class="section-title">展品分类</h2>
        <div class="scope-content">
          <div class="scope-category" v-for="category in categories" :key="category.id">
            <div class="category-header">
              <div class="category-icon">
                <el-icon><component :is="category.icon" /></el-icon>
              </div>
              <h3>{{ category.name }}</h3>
            </div>
            <div class="category-products">
              <div class="product-item" v-for="product in category.products" :key="product.id">
                <div class="product-icon">
                  <el-icon><component :is="product.icon" /></el-icon>
                </div>
                <div class="product-info">
                  <h4>{{ product.name }}</h4>
                  <p>{{ product.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 技术领域 -->
      <section class="technology-section">
        <h2 class="section-title">技术领域</h2>
        <div class="technology-content">
          <div class="tech-item" v-for="tech in technologies" :key="tech.id">
            <div class="tech-icon">
              <el-icon><component :is="tech.icon" /></el-icon>
            </div>
            <div class="tech-info">
              <h3>{{ tech.name }}</h3>
              <p>{{ tech.description }}</p>
              <div class="tech-features">
                <span v-for="feature in tech.features" :key="feature" class="tech-tag">
                  {{ feature }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 应用领域 -->
      <section class="application-section">
        <h2 class="section-title">应用领域</h2>
        <div class="application-content">
          <div class="app-item" v-for="app in applications" :key="app.id">
            <div class="app-header">
              <div class="app-icon">
                <el-icon><component :is="app.icon" /></el-icon>
              </div>
              <h3>{{ app.name }}</h3>
            </div>
            <p class="app-description">{{ app.description }}</p>
            <div class="app-examples">
              <h4>典型应用：</h4>
              <ul>
                <li v-for="example in app.examples" :key="example">{{ example }}</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!-- 展品统计 -->
      <section class="stats-section">
        <h2 class="section-title">展品统计</h2>
        <div class="stats-content">
          <div class="stat-card" v-for="stat in statistics" :key="stat.id">
            <div class="stat-icon">
              <el-icon><component :is="stat.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stat.number }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { 
  Monitor, 
  Cpu, 
  Connection, 
  Setting, 
  DataAnalysis,
  Service,
  User,
  Reading,
  Lock,
  Box,
  Location,
  Van,
  Apple,
  Edit
} from '@element-plus/icons-vue'

export default {
  name: 'ExhibitionScope',
  components: {
    Monitor,
    Cpu,
    Connection,
    Setting,
    DataAnalysis,
    Service,
    User,
    Reading,
    Lock,
    Box,
    Location,
    Van,
    Apple,
    Edit
  },
  setup() {
    const activeTab = ref('product-scope')
    const categories = ref([
      {
        id: 1,
        name: '工业机器人',
        icon: 'Setting',
        products: [
          {
            id: 1,
            name: '六轴机器人',
            icon: 'Monitor',
            description: '高精度、高负载的工业机器人，适用于焊接、搬运、装配等'
          },
          {
            id: 2,
            name: '协作机器人',
            icon: 'Connection',
            description: '人机协作的安全机器人，可与人类共同工作'
          },
          {
            id: 3,
            name: 'SCARA机器人',
            icon: 'Setting',
            description: '高速精密机器人，适用于装配、搬运、包装等'
          },
          {
            id: 4,
            name: '并联机器人',
            icon: 'DataAnalysis',
            description: '高速高精度机器人，适用于分拣、包装等'
          }
        ]
      },
      {
        id: 2,
        name: '服务机器人',
        icon: 'Service',
        products: [
          {
            id: 5,
            name: '商用服务机器人',
            icon: 'Service',
            description: '餐饮、零售、酒店等商业场所的服务机器人'
          },
          {
            id: 6,
            name: '家用服务机器人',
            icon: 'Service',
            description: '清洁、陪伴、教育等家庭服务机器人'
          },
          {
            id: 7,
            name: '医疗康复机器人',
            icon: 'User',
            description: '手术、康复、护理等医疗领域机器人'
          },
          {
            id: 8,
            name: '教育机器人',
            icon: 'Reading',
            description: '编程教育、STEAM教育等教育机器人'
          }
        ]
      },
      {
        id: 3,
        name: '特种机器人',
        icon: 'Lock',
        products: [
          {
            id: 9,
            name: '水下机器人',
            icon: 'Box',
            description: '海洋探测、水下作业等特种机器人'
          },
          {
            id: 10,
            name: '空中机器人',
            icon: 'Van',
            description: '无人机、飞行器等空中机器人'
          },
          {
            id: 11,
            name: '救援机器人',
            icon: 'Service',
            description: '灾难救援、搜救等特种机器人'
          },
          {
            id: 12,
            name: '军事机器人',
            icon: 'Lock',
            description: '军事侦察、排爆等特种机器人'
          }
        ]
      },
      {
        id: 4,
        name: '核心零部件',
        icon: 'Cpu',
        products: [
          {
            id: 13,
            name: '减速器',
            icon: 'Setting',
            description: '精密减速器，提供高精度传动'
          },
          {
            id: 14,
            name: '伺服电机',
            icon: 'Connection',
            description: '高精度伺服电机，提供精确控制'
          },
          {
            id: 15,
            name: '控制器',
            icon: 'Monitor',
            description: '机器人控制系统，实现智能控制'
          },
          {
            id: 16,
            name: '传感器',
            icon: 'DataAnalysis',
            description: '各类传感器，提供环境感知能力'
          }
        ]
      },
      {
        id: 5,
        name: '系统集成',
        icon: 'DataAnalysis',
        products: [
          {
            id: 17,
            name: '自动化生产线',
            icon: 'Setting',
            description: '工业自动化生产线系统集成'
          },
          {
            id: 18,
            name: '智能仓储系统',
            icon: 'Box',
            description: '智能仓储物流系统集成'
          },
          {
            id: 19,
            name: '智能制造系统',
            icon: 'DataAnalysis',
            description: '基于工业4.0的智能制造系统'
          },
          {
            id: 20,
            name: '柔性制造系统',
            icon: 'Setting',
            description: '适应多品种小批量生产的柔性系统'
          }
        ]
      }
    ])

    const technologies = ref([
      {
        id: 1,
        name: '人工智能技术',
        icon: 'Cpu',
        description: '机器学习、深度学习、自然语言处理等AI技术',
        features: ['机器学习', '深度学习', '计算机视觉', '自然语言处理']
      },
      {
        id: 2,
        name: '感知技术',
        icon: 'Monitor',
        description: '视觉、力觉、触觉等多模态感知技术',
        features: ['机器视觉', '力觉传感', '触觉传感', '多传感器融合']
      },
      {
        id: 3,
        name: '控制技术',
        icon: 'Setting',
        description: '运动控制、轨迹规划、力控制等控制技术',
        features: ['运动控制', '轨迹规划', '力控制', '自适应控制']
      },
      {
        id: 4,
        name: '通信技术',
        icon: 'Connection',
        description: '5G、物联网、边缘计算等通信技术',
        features: ['5G通信', '物联网', '边缘计算', '云平台']
      }
    ])

    const applications = ref([
      {
        id: 1,
        name: '制造业',
        icon: 'Setting',
        description: '汽车、电子、机械等制造业的自动化生产',
        examples: ['汽车焊接', '电子产品装配', '机械零件加工', '质量检测']
      },
      {
        id: 2,
        name: '医疗健康',
        icon: 'User',
        description: '手术、康复、护理等医疗健康领域',
        examples: ['微创手术', '康复训练', '药物配送', '远程医疗']
      },
      {
        id: 3,
        name: '物流仓储',
        icon: 'Box',
        description: '电商、快递、仓储等物流领域',
        examples: ['货物分拣', '仓储搬运', '配送服务', '智能包装']
      },
      {
        id: 4,
        name: '农业',
        icon: 'Box',
        description: '种植、养殖、农产品加工等农业领域',
        examples: ['精准种植', '智能采摘', '畜牧管理', '农产品检测']
      },
      {
        id: 5,
        name: '建筑',
        icon: 'Location',
        description: '建筑施工、装修、维护等建筑领域',
        examples: ['建筑测量', '施工辅助', '装修施工', '建筑维护']
      },
      {
        id: 6,
        name: '服务业',
        icon: 'Service',
        description: '餐饮、零售、酒店等服务业',
        examples: ['餐饮服务', '零售导购', '酒店服务', '清洁服务']
      }
    ])

    const statistics = ref([
      {
        id: 1,
        icon: 'Monitor',
        number: '1000+',
        label: '展品类别'
      },
      {
        id: 2,
        icon: 'Setting',
        number: '50+',
        label: '技术领域'
      },
      {
        id: 3,
        icon: 'Service',
        number: '20+',
        label: '应用行业'
      },
      {
        id: 4,
        icon: 'Connection',
        number: '100+',
        label: '技术专利'
      }
    ])

    const setActiveTab = (tabKey) => {
      if (!tabKey) return
      activeTab.value = tabKey
      // 跳转到对应的子页面
      if (tabKey !== 'product-scope') {
        window.location.href = `/${tabKey}`
      }
    }

    return {
      activeTab,
      categories,
      technologies,
      applications,
      statistics,
      setActiveTab
    }
  }
}
</script>

<style scoped>
.exhibition-scope {
  min-height: 100vh;
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 内容区域样式 */
.scope-section,
.technology-section,
.application-section,
.stats-section {
  margin: 80px 0;
  padding: 60px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 展品分类样式 */
.scope-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
}

.scope-category {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scope-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.category-header {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  padding: 25px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.category-icon {
  font-size: 2rem;
  color: #320063;
}

.category-header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #320063;
  margin: 0;
}

.category-products {
  padding: 25px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-item:last-child {
  border-bottom: none;
}

.product-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #ffd700;
  margin-right: 15px;
  flex-shrink: 0;
}

.product-info h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 5px;
}

.product-info p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}

/* 技术领域样式 */
.technology-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.tech-item {
  display: flex;
  align-items: flex-start;
  padding: 25px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.tech-item:hover {
  transform: translateX(10px);
}

.tech-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #320063;
  margin-right: 20px;
  flex-shrink: 0;
}

.tech-info h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #ffd700;
}

.tech-info p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
}

.tech-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 应用领域样式 */
.application-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.app-item {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.app-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.app-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #320063;
  margin-right: 15px;
}

.app-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #ffd700;
  margin: 0;
}

.app-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
}

.app-examples h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 10px;
}

.app-examples ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-examples li {
  padding: 5px 0;
  color: rgba(255, 255, 255, 0.8);
  position: relative;
  padding-left: 20px;
}

.app-examples li:before {
  content: '•';
  color: #ffd700;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* 展品统计样式 */
.stats-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.stat-card {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: scale(1.05);
}

.stat-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #320063;
  margin: 0 auto 20px;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ffd700;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-label {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .page-subtitle {
    font-size: 1rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .scope-content,
  .technology-content,
  .application-content {
    grid-template-columns: 1fr;
  }

  .stats-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .scope-category,
  .tech-item,
  .app-item {
    padding: 20px;
  }

  .category-header {
    padding: 20px;
  }

  .category-icon {
    font-size: 1.5rem;
  }

  .category-header h3 {
    font-size: 1.3rem;
  }

  .tech-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin-right: 15px;
  }

  .app-icon {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    margin-right: 12px;
  }

  .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .stat-number {
    font-size: 2rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.nav-item.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }
  
  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
</style> 